<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org"
>
<!--    统计报表    -->

<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">

</head>
<style>
    .cx>div{
        margin-bottom: 10px;
    }
</style>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg2">
            <div class="layui-card">
                <div class="layui-card-body mini-bar" id="leftTree">
                </div>
                <div class="layui-card-body mini-bar" id="leftTree1">
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md8 layui-col-lg10">
<!--          统计报表-->
            <div class="user_table_div">
                <table class="layui-table" id="statisticsTable" lay-filter="annualsTable"></table>
            </div>
<!--          统计报表(含清吊和空号)-->
            <div class="user_table_div">
                <table class="layui-table" id="statisticsTable1" lay-filter="annualsTable1"></table>
            </div>
        </div>
    </div>
</div>
<div id="deptTree" style="display: none"></div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="downloadAnnual" style="background-color: #f2f2f2; color: #666666; font-size: 16px;" disabled = "disabled" >统计报表</button>
        <button class="layui-btn layui-btn-sm" lay-event="downloadAnnual" style="float: right;margin-right: -118px;" >下载</button>
    </div>
</script>
<script type="text/html" id="toolbar1">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="downloadAnnual1" style="background-color: #f2f2f2; color: #666666; font-size: 16px;" disabled = "disabled" >统计报表(含清吊和空号)</button>
        <button class="layui-btn layui-btn-sm" lay-event="downloadAnnual1" style="float: right;margin-right: -118px;" >下载</button>
    </div>
</script>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script>
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var tableIns2;
    var table = layui.table;
    var upload = layui.upload;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
    var tree = layui.tree;
    var transfer = layui.transfer;
    var type1 = 'type1';
    var type2 = 'type4';
    var startDateOfEstablishment = null;
    var endDateOfEstablishment = null;
    layui.use(['table', 'layer', 'laydate', 'tree', 'transfer','upload'], function () {
        initLeftTree();
        initLeftTree1();
        tableIns1 = table.render({
            elem: '#statisticsTable'// 表格id
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: '/statisticsRpt/findAllStatisticsReport' //数据接口
            , method: 'POST'
            , toolbar: '#toolbar'
            , defaultToolbar: []
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(type1);
                if(type1 == 'type1'){
                    console.log(res,1);
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data.type1) ? 0 : res.data.type1.length, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data.type1) ? null : res.data.type1 //解析数据列表
                    }
                }if(type1 == 'type2'){
                    console.log(res,2);
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data.type2) ? 0 : res.data.type2.length, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data.type2) ? null : res.data.type2 //解析数据列表
                    }
                }if(type1 == 'type3'){
                    console.log(res,3);
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data.type3) ? 0 : res.data.type3.length, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data.type3) ? null : res.data.type3 //解析数据列表
                    }
                }
            },
            cols: [
                [
                    // {title: '编号',templet: '#xuhao'},
                    {
                        field: 'enterpriseType', title: '企业分类',templet:function (item) {
                            if(item.enterpriseType === 1){
                                return '企业';
                            }if(item.enterpriseType === 2){
                                return '农合社';
                            }if(item.enterpriseType === 3){
                                return '个人';
                            }
                        }
                    },
                    {field: 'addressName', title: '街道'},
                    {field: 'annualReport', title: '应上报企业数量'},
                    {field: 'reportedQuantity', title: '已上报企业数量'},
                    {field: 'notReportQuantity', title: '未上报数量'},
                    {
                        field: 'annualReportRate', title: '上报率',templet:function (item) {
                            return item.annualReportRate+'%';
                        }
                    },
                    {field: 'ranking', title: '排名', sort: true},
                    {
                        field: 'createTime', title: '创建日期', templet: function (item) {
                            return "<div>"+layui.util.toDateString(item.createTime, 'yyyy年MM月dd日')+"</div>";
                        }
                    }
                ]
            ]
        });
        tableIns2 = table.render({
            elem: '#statisticsTable1'// 表格id
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: '/statisticsRpt/findAllStatisticsReport' //数据接口
            , method: 'POST'
            , toolbar: '#toolbar1'
            , defaultToolbar: []
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(type2);
                if(type2 == 'type4'){
                    console.log(res,4);
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data.type4) ? 0 : res.data.type4.length, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data.type4) ? null : res.data.type4 //解析数据列表
                    }
                }if(type2 == 'type5'){
                    console.log(res,5);
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data.type5) ? 0 : res.data.type5.length, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data.type5) ? null : res.data.type5 //解析数据列表
                    }
                }if(type2 == 'type6'){
                    console.log(res,6);
                    return {
                        "code": res.code, //解析接口状态
                        // "msg": res.msg, //解析提示文本
                        "count": CoreUtil.isEmpty(res.data.type6) ? 0 : res.data.type6.length, //解析数据长度
                        "data": CoreUtil.isEmpty(res.data.type6) ? null : res.data.type6 //解析数据列表
                    }
                }
            },
            cols: [
                [
                    // {title: '编号',templet: '#xuhao'},
                    {
                        field: 'enterpriseType', title: '企业分类',templet:function (item) {
                            if(item.enterpriseType === 1){
                                return '企业';
                            }if(item.enterpriseType === 2){
                                return '农合社';
                            }if(item.enterpriseType === 3){
                                return '个人';
                            }
                        }
                    },
                    {field: 'addressName', title: '街道'},
                    {field: 'annualReport', title: '应上报企业数量'},
                    {field: 'reportedQuantity', title: '已上报企业数量'},
                    {field: 'notReportQuantity', title: '未上报数量'},
                    {field: 'clearNumber', title: '清吊'},
                    {field: 'emptyNumber', title: '空号'},
                    {
                        field: 'annualReportRate', title: '上报率',templet:function (item) {
                            return item.annualReportRate+'%';
                        }
                    },
                    {field: 'ranking', title: '排名', sort: true},
                    {
                        field: 'createTime', title: '创建日期', templet: function (item) {
                            return "<div>"+layui.util.toDateString(item.createTime, 'yyyy年MM月dd日')+"</div>";
                        }
                    }
                ]
            ]
        });

        //统计报表
        table.on('toolbar', function (obj) {
            switch (obj.event) {
                case 'downloadAnnual':
                    downloadAnnual();
                    break;
                //统计报表（含清吊和空号）
                case 'downloadAnnual1':
                    console.log("123456");
                    downloadAnnual1();
                    break;
            }
        });
        /**
         * 下载按钮调用接口
         */
        var downloadAnnual = function () {
            window.location.href = "/download/statisticsReportExcel";
            // CoreUtil.downloadExcel("/rpt/annualReportDownloadExcel", {},
            //     function (res) {console.log(res);});
        };

        //统计报表（含清吊和空号）
        // table.on('toolbar1(annualsTable1)', function (obj) {
        //     switch (obj.event) {
        //
        //     }
        // });
        /**
         * 下载按钮调用接口
         */
        var downloadAnnual1 = function () {
            console.log("123456");
            window.location.href = "/download/statisticsReportExcelEmpty";
            console.log("123456")
            // CoreUtil.sendPost("/sys/download", {}, function (res) {
            //     console.log(res);
            // });
        };

        function initLeftTree(){
            var data1 = [{
                title:'默认企业类型',
                id:1,
                label:'默认企业类型',
                spread:true,
                disabled:true,
                checked:false,
                children:[{
                    title:'企业',
                    id:1,
                    label:'企业',
                    spread:true,
                    enterpriseType:1,
                    disabled:false,
                    type:'type1'
                },{
                    title:'农合社',
                    id:2,
                    label:'农合社',
                    spread:true,
                    enterpriseType:2,
                    disabled:false,
                    type:'type2'
                },{
                    title:'个人',
                    id:3,
                    label:'个人',
                    spread:true,
                    enterpriseType:3,
                    disabled:false,
                    type:'type3'
                }]
            }];
            tree.render({
                elem: '#leftTree'
                , data: data1
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                , click: function (obj) {
                    console.log(obj,456);
                    type1 = obj.data.type;
                    $("#leftTree span").removeClass('custom-tree-item-clicked');     //清除旧的样式
                    $("#leftTree span:contains(" + obj.data.title + ")").addClass('custom-tree-item-clicked');
                    search1()

                }
            });
        }

        function initLeftTree1(){
            var data1 = [{
                title:'默认企业类型(含清吊和空号)',
                id:1,
                label:'默认企业类型(含清吊和空号)',
                spread:true,
                disabled:true,
                checked:false,
                children:[{
                    title:'企业',
                    id:1,
                    label:'企业',
                    spread:true,
                    enterpriseType:1,
                    disabled:false,
                    type:'type4'
                },{
                    title:'农合社',
                    id:2,
                    label:'农合社',
                    spread:true,
                    enterpriseType:2,
                    disabled:false,
                    type:'type5'
                },{
                    title:'个人',
                    id:3,
                    label:'个人',
                    spread:true,
                    enterpriseType:3,
                    disabled:false,
                    type:'type6'
                }]
            }];
            tree.render({
                elem: '#leftTree1'
                , data: data1
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                , click: function (obj) {
                    console.log(obj,456);
                    type2 = obj.data.type;
                    $("#leftTree1 span").removeClass('custom-tree-item-clicked');     //清除旧的样式
                    $("#leftTree1 span:contains(" + obj.data.title + ")").addClass('custom-tree-item-clicked');
                    search2()

                }
            });
        }


    });

    /**
     * 设置日期
     */
    laydate.render({
        elem: '#date_of_establishment'
        , type: 'date'
        , range: '~'
        , done: function (value, date, endDate) {
            if (value != null && value != undefined && value != "") {
                startDateOfEstablishment = value.split("~")[0];
                endDateOfEstablishment = value.split("~")[1];
            } else {
                startDateOfEstablishment = null;
                endDateOfEstablishment = null;
            }

        }
    });

    /**
     * 条件查询按钮方法
     */
    function search1() {
        //这里以搜索为例
        tableIns1.reload({
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

    /**
     * 条件查询按钮方法
     */
    function search2() {
        //这里以搜索为例
        tableIns2.reload({
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>
</body>
</html>